@import "./variables/index";

.wrapper {
  height: $--head-height;
  background: #0b1c29;
  display: flex;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;

    .logo {
      width: 230px;
      height: 100%;

      .image {
        height: 100%;
      }
    }

    .label {
      color: white;
      font-size: 20px;
      pointer-events: none;
    }
  }

  .right {
    display: flex;
    align-items: center;
    padding-right: 15px;

    .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding-right: 20px;

      .image {
        width: $--head-height / 1.5;
        border-radius: 50%;
      }

      .username {
        padding-left: 10px;
        color: #fff;
      }
    }
  }

}

$--theme-lists__wrapper: #0b1c29, blue, yellowgreen;
$--theme-lists__wrapper__tabs-wrapper: -webkit-linear-gradient(top, #082741, #396487),
-webkit-linear-gradient(top, #5485fe, red),
-webkit-linear-gradient(top, #000, #fff);
@each $theme in $--theme-lists {
  :global(.theme-#{$theme}) {
    $i: index($--theme-lists, $theme);
    @if (length($--theme-lists__wrapper) < $i) {
      $i: 1
    }

    .wrapper {
      background: nth($--theme-lists__wrapper, $i);
    }
  }
}
